<template>
	<view>
		<!-- #ifdef APP-PLUS -->
		<view>
			<uni-nav-bar left-icon="arrowleft" @clickLeft="back" :title="mystore.storeName" :statusBar='true' :fixed="true"></uni-nav-bar>
		</view>
		<!-- #endif -->
		<view class="shopdetail">
			<view class="my-need-height">
				<view class="shopdetail-banner">
					<image mode="aspectFill" :src="commonImg(mystore.coverImage)" class="shopdetail-banner-img"></image>
				</view>
				<view class="shopdetail-select">
					<!-- <view @click="onClickSelectIndex(0)" :class="{ 'shopdetail-select-item-active': selectIndex === 0 }" class="shopdetail-select-item">点单</view> -->
					<view @click="onClickSelectIndex(1)" :class="{ 'shopdetail-select-item-active': selectIndex === 1 }" class="shopdetail-select-item">商家</view>
					<view @click="onClickSelectIndex(2)" :class="{ 'shopdetail-select-item-active': selectIndex === 2 }" class="shopdetail-select-item">评价</view>
				</view>
			</view>
			<view v-show="selectIndex === 0">
				<view class="shopdetail-introduce">
					<view class="shopdetail-introduce-wrap">
						<view class="shopdetail-introduce-wrap-name">
							<text class="shopdetail-introduce-wrap-name-txt">{{ mystore.storeName }}</text>
							<text class="shopdetail-introduce-wrap-name-jl">{{ mystore.jlresult }}km</text>
						</view>
						<view class="shopdetail-introduce-wrap-zk">
							<!-- <image :src="commonImg('pingfen.png')" class="shopdetail-introduce-wrap-zk-img"></image> -->
							<!-- <text class="shopdetail-introduce-wrap-zk-txt">4.5分</text> -->
							<view class="shopdetail-introduce-wrap-zk-left">
								<!-- <text class="shopdetail-introduce-wrap-zk-left-mark">折</text> -->
								<text class="shopdetail-introduce-wrap-zk-left-txt">PLUS会员价{{ mystore.vip2 }}折</text>
							</view>
							<view class="shopdetail-introduce-wrap-zk-right">
								<!-- <text class="shopdetail-introduce-wrap-zk-right-mark">折</text> -->
								<text class="shopdetail-introduce-wrap-zk-right-txt">会员价{{ mystore.vip1 }}折</text>
							</view>
						</view>
						<view class="shopdetail-introduce-wrap-pl">
							<view :key="item.id" v-for="item of tags" class="shopdetail-introduce-wrap-pl-item">
								<view class="shopdetail-introduce-wrap-pl-item-content">{{ item.content }}</view>
							</view>
						</view>
						<view class="shopdetail-introduce-wrap-line"></view>
						<view class="shopdetail-introduce-wrap-warn">
							<text class="shopdetail-introduce-wrap-warn-title">特别提醒：</text>
							<view class="shopdetail-introduce-wrap-warn-content">
								<text class="shopdetail-introduce-wrap-warn-content-top">本店不支持开发票</text>
								<text class="shopdetail-introduce-wrap-warn-content-bottom">本店仅采耳业务支持码上结其他业务不支持</text>
							</view>
						</view>
					</view>
				</view>
				<!-- #ifdef APP-PLUS -->
				<view class="shopdetail-list" :style="{ 'height': maxWindowHeight_app + 'px' }">
				<!-- #endif -->
				<!-- #ifndef APP-PLUS -->
				<view class="shopdetail-list" :style="{ 'height': maxWindowHeight_h5 + 'px' }">
				<!-- #endif -->
					<scroll-view scroll-y :scroll-with-animation='true' class="shopdetail-list-title">
						<view @click="onClickChangeCategoryCurrent(index)" v-for="(item, index) of categoryList" :key="item.id" :class="{ 'shopdetail-list-title-item-active': categoryCurrent === index }" class="shopdetail-list-title-item">{{ item.name }}</view>
					</scroll-view>
					<scroll-view @scrolltolower="onScrolltolowerRight" scroll-y :scroll-with-animation='true' class="shopdetail-list-content">
						<text v-if="(categoryList !== undefined) && categoryList.length" class="shopdetail-list-content-title">{{ categoryList[categoryCurrent].name }}</text>
						<view class="shopdetail-list-content-list">
							<view v-for="item of currentList" :key="item.id" class="shopdetail-list-content-list-item">
								<image :src="commonImg(item.images)" class="shopdetail-list-content-list-item-img"></image>
								<view class="shopdetail-list-content-list-item-info">
									<text class="shopdetail-list-content-list-item-info-name">{{ item.name }}</text>
									<view class="shopdetail-list-content-list-item-info-price-num">
										<view class="shopdetail-list-content-list-item-info-price-num-left">
											<text class="shopdetail-list-content-list-item-info-price-num-left-mark">￥</text>
											<text class="shopdetail-list-content-list-item-info-price-num-left-num">{{ item.price }}</text>
										</view>
										<view class="shopdetail-list-content-list-item-info-price-num-right">
											<image :src="commonImg('jian.png')" @click="onClickDeducNumById(item.id)" v-if="item.goodsSum > 0" class="shopdetail-list-content-list-item-info-price-num-right-jian"></image>
											<text v-if="item.goodsSum > 0" class="shopdetail-list-content-list-item-info-price-num-right-num">{{ item.goodsSum }}</text>
											<image :src="commonImg('jia.png')" @click="onClickAddNumById(item.id)" class="shopdetail-list-content-list-item-info-price-num-right-jia"></image>
										</view>
									</view>
									<view class="shopdetail-list-content-list-item-info-price-yues">月售：1001</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="shopdetail-handle">
					<view class="shopdetail-handle-wrap">
						<view @click="onClickPhone(mystore.phone)" class="shopdetail-handle-wrap-left">
							<image :src="commonImg('lianxishangjia.png')" class="shopdetail-handle-wrap-left-img"></image>
							<view class="shopdetail-handle-wrap-left-txt">
								<text class="shopdetail-handle-wrap-left-txt-top">联系</text>
								<text class="shopdetail-handle-wrap-left-txt-bottom">商家</text>
							</view>
						</view>
						<view class="shopdetail-handle-wrap-middle">已选（{{ totalNum }}） ¥{{ totalPrice }}</view>
						<view @click="onClickGotoCartPage" class="shopdetail-handle-wrap-right">
							<image :src="commonImg('gouwuche.png')" class="shopdetail-handle-wrap-right-img"></image>
							<text class="shopdetail-handle-wrap-right-txt">去结算</text>
							<image :src="commonImg('right.png')" class="shopdetail-handle-wrap-right-arrow"></image>
						</view>
					</view>
				</view>
			</view>
			<view v-show="selectIndex === 1">
				<view class="shopdetail-weizhi">
					<view class="shopdetail-weizhi-wrap">
						<view class="shopdetail-weizhi-wrap-name">
							<text class="shopdetail-weizhi-wrap-name-txt">{{ mystore.storeName }}</text>
							<text class="shopdetail-weizhi-wrap-name-jl">{{ mystore.jlresult }}km</text>
						</view>
						<view class="shopdetail-weizhi-wrap-line"></view>
						<view class="shopdetail-weizhi-wrap-address">
							<image :src="commonImg('weizhi.png')" class="shopdetail-weizhi-wrap-address-leftimg"></image>
							<text @click="onClickOpenMap(mystore)" class="shopdetail-weizhi-wrap-address-txt">{{ mystore.province }}{{ mystore.city }}{{ mystore.area }}</text>
							<image @click="onClickPhone(mystore.phone)" :src="commonImg('tel.png')" class="shopdetail-weizhi-wrap-address-rightimg"></image>
						</view>
						<view class="shopdetail-weizhi-wrap-time">
							<image :src="commonImg('wait.png')" class="shopdetail-weizhi-wrap-time-img"></image>
							<text class="shopdetail-weizhi-wrap-time-txt">营业时间：{{ mystore.businessHoursStart }}-{{ mystore.businessHoursEnd }}</text>
						</view>
					</view>
				</view>
				<view class="shopdetail-dbanner">
					<swiper class="shopdetail-dbanner-img" :autoplay="true" :interval="4444" :duration="1000">
						<swiper-item style="width: 100%;height: 100%;" :key='item' v-for="item of mystore.swiperData">
							<image mode="aspectFill" style="width: 100%;height: 100%;" class="swiper-item" :src="commonImg(item)"></image>
						</swiper-item>
					</swiper>
				</view>
				<view class="shopdetail-jj">
					<view class="shopdetail-jj-wrap">
						<image :src="commonImg('pinpai.png')" class="shopdetail-jj-wrap-img"></image>
						<text class="shopdetail-jj-wrap-txt">品牌简介：{{ mystore.recommendation }}</text>
					</view>
				</view>
				<view @click="onClickGotoNoVipPayPage" class="shopdetail-smjz savepadding">
					<button class="shopdetail-smjz-btn">
						<text class="shopdetail-smjz-btn-txt">去结账</text>
					</button>
				</view>
			</view>
			<view v-show="selectIndex === 2">
				<!-- #ifdef APP-PLUS -->
				<scroll-view @scrolltolower="onScrolltolowerPL" :scroll-with-animation='true' :style="{ 'height': plHeight_app + 'px' }" scroll-y class="shopdetail-pj">
				<!-- #endif -->
				<!-- #ifndef APP-PLUS -->
				<scroll-view @scrolltolower="onScrolltolowerPL" :scroll-with-animation='true' :style="{ 'height': plHeight_h5 + 'px' }" scroll-y class="shopdetail-pj">
				<!-- #endif -->
					<view v-for="(item, index) of pl_list" :key="item.id" class="shopdetail-pj-item">
						<image :src="commonImg('avatar.png')" class="shopdetail-pj-item-avatar"></image>
						<view class="shopdetail-pj-item-info">
							<view class="shopdetail-pj-item-info-wrap">
								<view class="shopdetail-pj-item-info-wrap-name">
									<text class="shopdetail-pj-item-info-wrap-name-top">昵称</text>
									<text class="shopdetail-pj-item-info-wrap-name-bottom">{{ item.createdAt2 }}</text>
								</view>
								<view class="shopdetail-pj-item-info-wrap-zan">
									<text class="shopdetail-pj-item-info-wrap-zan-num">24</text>
									<image :src="commonImg('zan.png')" class="shopdetail-pj-item-info-wrap-zan-img"></image>
								</view>
							</view>
							<view class="shopdetail-pj-item-info-content">{{ item.content }}</view>
							<view v-if="(index + 1) !== pl_list.length" class="shopdetail-pj-item-info-line"></view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { config, mygettime, myGetDistance } from '@/utils/config.js'
	import { myMixin } from '@/utils/mixin.js'
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	// #ifdef H5
	const jweixin = require('../../utils/jweixin-module.js');
	// #endif
	export default {
		mixins: [myMixin],
		data() {
			return {
				plHeight_h5: 0,
				plHeight_app: 0,
				maxWindowHeight_h5: 0,
				maxWindowHeight_app: 0,
				id: '',
				selectIndex: 1,
				// 评论
				pl_page: 1,
				pl_size: 10,
				pl_total: 0,
				pl_totalPage: 0,
				pl_list: [],
				// 商家信息
				mystore: {},
				// 标签
				tags: [],
				// 分类列表
				categoryList: [],
				categoryCurrent: 0, // 默认是0
				// 分类对应的列表
				page: 1,
				size: 10,
				total: 0,
				totalPage: 0,
				currentList: [],
				// 处理金额和数量
				totalPrice: 0,
				totalNum: 0,
				latitude: '',
				longitude: '',
			}
		},
		onHide() {
			// 离开之前的保存购物车
			// this._leaveSaveCart()
		},
		onUnload() {
			// 离开之前的保存购物车
			// this._leaveSaveCart()
		},
		components: {
			uniNavBar
		},
		methods: {
			// 判断公众号截取code
			getUrlParam(name) {
				let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
				let r = window.location.search.substr(1).match(reg);
				if (r != null) {
					return unescape(r[2]);
				}
				return null;
			},
			onClickGotoNoVipPayPage() {
				// #ifdef H5
				if ((!uni.getStorageSync('openId')) && (!this.getUrlParam('code'))) {
					let url = window.location.href
					let new_url = encodeURIComponent(url)
					window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6246e0503023027f&redirect_uri=${new_url}&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect`
				} else if ((!uni.getStorageSync('openId')) && (this.getUrlParam('code'))) {
					uni.showLoading({
						title: '正在登录中'
					})
					const token = uni.getStorageSync('token')
					const code = this.getUrlParam('code')
					uni.request({
						url: `${config.api_base_url}member/member/getInfoByWeChatCode`,
						data:{code:'code'},
						method:'POST',
						success: ((res) => {
							let { status, data } = res.data
							console.log(status)
							console.log(data)
							// debugger
							if (status.flag === true) {
								uni.setStorageSync('openId', data.openid)
								if (!token) {
									uni.request({
										url: `${config.api_base_url}member/member/login/openId`,
										data: {
											openId: data.openid
										},
										method: 'POST',
										success: ((res_n) => {
											let { status, data } = res_n.data
											if (status.flag === true) {
												uni.setStorageSync('role', data.role)
												uni.setStorageSync('token', data.token)
												uni.setStorageSync('memberId', data.memberId)
												uni.navigateTo({
													url: `../novippay/novippay?storeId=${this.id}`
												})
											}
										}),
										complete: (() => {
											uni.hideLoading()
										})
									})
								} else {
									uni.hideLoading()
									uni.navigateTo({
										url: `../novippay/novippay?storeId=${this.id}`
									})
								}
							}
						}),
						complete: (() => {
							uni.hideLoading()
						})
					})
				} else if (uni.getStorageSync('openId')) {
					uni.showLoading({
						title: '正在登录中'
					})
					const token = uni.getStorageSync('token')
					if (!token) {
						uni.request({
							url: `${config.api_base_url}member/member/login/openId`,
							data: {
								openId: uni.getStorageSync('openId')
							},
							method: 'POST',
							success: ((res_n) => {
								let { status, data } = res_n.data
								if (status.flag === true) {
									uni.setStorageSync('role', data.role)
									uni.setStorageSync('token', data.token)
									uni.setStorageSync('memberId', data.memberId)
									uni.navigateTo({
										url: `../novippay/novippay?storeId=${this.id}`
									})
								}
							}),
							fail: (() => {
								uni.hideLoading()
							})
						})
					} else {
						uni.hideLoading()
						uni.navigateTo({
							url: `../novippay/novippay?storeId=${this.id}`
						})
					}
				}
				// #endif
				// #ifndef H5
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({
						icon: 'none',
						title: '尚未登录, 请先登录'
					})
					setTimeout(() => {
						uni.removeStorageSync('role')
						uni.removeStorageSync('memberId')
						uni.removeStorageSync('token')
						uni.removeStorageSync('openId')
						uni.reLaunch({
							url: '../verificationcodelogin/verificationcodelogin'
						})
					}, 777)
					return false
				}
				uni.navigateTo({
					url: `../novippay/novippay?storeId=${this.id}`
				})
				// #endif
			},
			back() {
				uni.navigateBack({})
			},
			// 离开之前的保存购物车
			_leaveSaveCart() {
				// 这里是分2种情况：1、有token，直接走接口；2、没有token，存在本地
				const token = uni.getStorageSync('token')
				if (token) {
					let obj = {}
					let goods = []
					const cartList = JSON.parse(JSON.stringify(this.cartList))
					if ((cartList != undefined) && (cartList.length)) {
						for (const item of cartList) {
							if (item.goodsId) {
								const obj = {}
								obj.goodsId = item.goodsId
								obj.goodsSum = item.goodsSum
								goods.push(obj)
							}
						}
					} else {
						goods = []
					}
					obj.goods = goods
					obj = JSON.stringify(obj)
					uni.request({
						url: `${config.api_base_url}member/cart/${this.id}`,
						method: 'PUT',
						header: {
							'AUTH': 'ROBOT ' + uni.getStorageSync('token')
						},
						data: obj,
						success: ((res) => {
						}),
						fail: (() => {
							uni.showToast({
								icon: 'none',
								title: '保存失败'
							})
						})
					})
				} else {
					let storeCartList = uni.getStorageSync('storeCartList')
					if (storeCartList) {
						storeCartList = JSON.parse(storeCartList)
					} else {
						storeCartList = []
					}
					if (storeCartList.length) {

						const cartList = JSON.parse(JSON.stringify(this.cartList))
						let newCartList = []
						for (const item of cartList) {
							if (item.goodsSum > 0) {
								newCartList.push(item)
							}
						}
						if (newCartList.length) {
							storeCartList = storeCartList.concat(newCartList)
							uni.setStorageSync('storeCartList', JSON.stringify(storeCartList))
						} else {
							uni.setStorageSync('storeCartList', JSON.stringify(storeCartList))
						}
					} else {
						const cartList = JSON.parse(JSON.stringify(this.cartList))
						let newCartList = []
						for (const item of cartList) {
							if (item.goodsSum > 0) {
								newCartList.push(item)
							}
						}
						if (newCartList.length) {
							uni.setStorageSync('storeCartList', JSON.stringify(newCartList))
						}
					}
				}
			},
			// 改变本地与购物车同步
			_setStoreList(newObj) {
				// 解决当有购物车的时候，统一id的问题
				newObj.goodsId = newObj.id
				newObj.goodsPrice = newObj.price
				let cartList = JSON.parse(JSON.stringify(this.cartList))
				if ((cartList !== undefined) && (cartList.length)) {
					const result = cartList.some(item => item.goodsId === newObj.id)
					if (result) {
						if (newObj.goodsSum > 0) {
							cartList.forEach((item, index) => {
								if (item.goodsId === newObj.id) {
									item.goodsSum = newObj.goodsSum
								}
							})
						} else {
							cartList.forEach((item, index) => {
								if (item.goodsId === newObj.id) {
									item.goodsSum = 0
								}
							})
						}
					} else {
						cartList.push(newObj)
					}
				} else {
					cartList.push(newObj)
				}
				this.cartList = cartList
				this._handleTotalNumAndTotalPrice()
			},
			// 增加
			onClickAddNumById(id) {
				this.currentList.forEach(item => {
					if (item.id === id) {
						item.goodsSum += 1
					}
				})
				const res = this.currentList.filter(item => item.id === id)
				this._setStoreList(...res) // 设置本地存储
			},
			// 减少
			onClickDeducNumById(id) {
				this.currentList.forEach(item => {
					if (item.id === id) {
						item.goodsSum -= 1
					}
				})
				const res = this.currentList.filter(item => item.id === id)
				this._setStoreList(...res) // 设置本地存储
			},
			// 点击切换分类的时候
			onClickChangeCategoryCurrent(index) {
				if (index === this.categoryCurrent) {
					return false
				}
				this.categoryCurrent = index
				this.page = 1
				this.size = 10
				this.total = 0
				this.totalPage = 0
				this.currentList = []
				this._getDetailCategoryContentById(this.categoryList[this.categoryCurrent].id)
			},
			// 4、处理金钱，处理总金额和钱
			_handleTotalNumAndTotalPrice() {
				let newlist = this.cartList
				let totalPrice = 0
				let totalNum = 0

				let newlist2 = []
				for (const item of newlist) {
					newlist2.push(item)
				}
				for (const item of newlist2) {
					totalPrice += item.goodsPrice * item.goodsSum
					totalNum += item.goodsSum
				}
				this.totalPrice = totalPrice
				this.totalNum = totalNum
			},
			// 3、处理购物车和当前分类的内容
			_handleNum() {
				const cartList = JSON.parse(JSON.stringify(this.cartList)) // 购物车
				const list = JSON.parse(JSON.stringify(this.currentList)) // 你当前分类的内容
				if ((cartList !== undefined) && (cartList.length)) {
					for (const item_a of list) {
						for (const item_l of cartList) {
							if (item_l.goodsId === item_a.id) {
								item_a.goodsSum = item_l.goodsSum
								break
							} else {
								item_a.goodsSum = 0
							}
						}
					}
				} else {
					for (const item of list) {
						if (item.id) {
							item.goodsSum = 0
						}
					}
				}
				this.currentList = list
				this._handleTotalNumAndTotalPrice()
			},
			// 内容上拉加载
			onScrolltolowerRight() {
				const page1 = this.page + 1;
				const totalPage = this.totalPage;
				if (page1 <= totalPage) {
					this.page = page1;
					this._getDetailCategoryContentById(this.categoryList[this.categoryCurrent].id)
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					});
				}
			},
			// 2、拿到指定分类里面的内容
			_getDetailCategoryContentById(id) {
				const page = this.page
				const size = this.size
				uni.request({
					url: `${config.api_base_url}merchant/store/storeGoods/${this.id}/${page}/${size}`,
					data: {
						categoryId: id,
						storeId: this.id
					},
					method: 'POST',
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.total = data.total
							this.totalPage = this.pageTotal(this.total, this.size)
							this.currentList = this.currentList.concat(data.rows)
							this._handleNum()
						} else {
							this.total = 0
							this.totalPage = 0
							this.currentList = []
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '请求详情失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
			// 1、拿到分类
			_getCurrentStoreCategoryList() {
				uni.request({
					url: `${config.api_base_url}merchant/store/storeGoodsCategory/${this.id}`,
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.categoryList = data
							// 拿到指定分类里面的数据
							this._getDetailCategoryContentById(this.categoryList[this.categoryCurrent].id)
						} else {
							this.categoryList = []
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '请求评论失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
			// 0、拿到购物车的内容
			_getCartData(id) {
				const token = uni.getStorageSync('token')
				let storeCartList = uni.getStorageSync('storeCartList')
				if (storeCartList) {
					storeCartList = JSON.parse(storeCartList)
				}
				if (token && storeCartList.length) { // 有token，本地也有购物车
					uni.request({
						url: `${config.api_base_url}member/cart/${this.id}`,
						header: {
							'AUTH': 'ROBOT ' + uni.getStorageSync('token')
						},
						success: ((res) => {
							let { status, data } = res.data
							let cartList = []
							if (status.flag === true && (data.shoppingCartDetails !== undefined) && (data.shoppingCartDetails.length)) {
								const newArr = []
								for (const index in storeCartList) {
									if (storeCartList[index].storeId === this.id) {
										newArr.push(storeCartList[index])
									}
								}
								const newStoreCartList = storeCartList.filter(item => { return item.storeId !== this.id })
								let lastArr = []
								data.shoppingCartDetails[0].cartDetailsList.forEach((item1, index1) => {
									newArr.forEach((item2, index2) => {
										if (item1.goodsId === item2.goodsId) {
											item1.goodsSum = item1.goodsSum + item2.goodsSum
											newArr.splice(index2, 1)
										}
									})
								})
								lastArr = data.shoppingCartDetails[0].cartDetailsList.concat(newArr)
								this.cartList = lastArr
								uni.setStorageSync('storeCartList', JSON.stringify(newStoreCartList))
							} else {
								const newArr = []
								for (const index in storeCartList) {
									if (storeCartList[index].storeId === this.id) {
										newArr.push(storeCartList[index])
									}
								}
								const newStoreCartList = storeCartList.filter(item => { return item.storeId !== this.id })
								this.cartList = [].concat(newArr)
								uni.setStorageSync('storeCartList', JSON.stringify(newStoreCartList))
							}
						}),
						fail: (() => {
							uni.showToast({
								icon: 'none',
								title: '查询购物车失败, 暂无数据'
							})
						}),
						complete: (() => {
							this._getCurrentStoreCategoryList() // 分类列表
						})
					})
				} else if (token && !storeCartList.length) {
					uni.request({
						url: `${config.api_base_url}member/cart/${this.id}`,
						header: {
							'AUTH': 'ROBOT ' + uni.getStorageSync('token')
						},
						success: ((res) => {
							let { status, data } = res.data
							let cartList = []
							if (status.flag === true && (data.shoppingCartDetails !== undefined) && (data.shoppingCartDetails.length)) {
								this.cartList = data.shoppingCartDetails[0].cartDetailsList
							} else {
								this.cartList = []
							}
						}),
						fail: (() => {
							uni.showToast({
								icon: 'none',
								title: '查询购物车失败, 暂无数据'
							})
						}),
						complete: (() => {
							this._getCurrentStoreCategoryList() // 分类列表
						})
					})
				} else if (!token && storeCartList.length) {
					const newArr = []
					for (const index in storeCartList) {
						if (storeCartList[index].storeId === this.id) {
							newArr.push(storeCartList[index])
						}
					}
					const newStoreCartList = storeCartList.filter(item => { return item.storeId !== this.id })
					this.cartList = newArr
					uni.setStorageSync('storeCartList', JSON.stringify(newStoreCartList))
					this._getCurrentStoreCategoryList() // 分类列表
				} else if (!token && !storeCartList.length) {
					this.cartList = []
					this._getCurrentStoreCategoryList() // 分类列表
				}
			},
			// 打开地图
			onClickOpenMap(myStore) {
				const longitude = myStore.longitude
				const latitude = myStore.latitude
				if (!longitude) {
					uni.showToast({
						icon: 'none',
						title: '该店铺缺少经度, 暂无法打开地图'
					})
					return false
				}
				if (!latitude) {
					uni.showToast({
						icon: 'none',
						title: '该店铺缺少纬度, 暂无法打开地图'
					})
					return false
				}
				uni.openLocation({
					latitude: Number(latitude),
					longitude: Number(longitude),
					success: ((res) => {
						console.log(res)
					})
				})
			},
			// 拨打电话
			onClickPhone(tel) {
				if (!tel) {
					return false
				}
				uni.makePhoneCall({
					phoneNumber: tel
				})
			},
			onClickSelectIndex(index) {
				this.selectIndex = index
			},
			onClickGotoCartPage() {
				const token = uni.getStorageSync('token')
				if (!token) {
					uni.showToast({
						icon: 'none',
						title: '尚未登录, 请先登录'
					})
					setTimeout(() => {
						uni.removeStorageSync('role')
						uni.removeStorageSync('memberId')
						uni.removeStorageSync('token')
						uni.removeStorageSync('openId')
						uni.reLaunch({
							url: '../verificationcodelogin/verificationcodelogin'
						})
					}, 777)
					return false
				}
				if (!this.id) {
					uni.showToast({
						icon: 'none',
						title: '暂无id, 无法查看购物车'
					})
					return false
				}
				uni.navigateTo({
					url: `../cart/cart?id=${this.id}`
				})
			},
			pageTotal(rowCount, pageSize) {
				if (rowCount === null || rowCount === "") {
					return 0;
				} else {
					if ((pageSize !== 0) && (rowCount % pageSize === 0)) {
						return parseInt(rowCount / pageSize)
					}
					if ((pageSize !== 0) && (rowCount % pageSize !== 0)) {
						return parseInt(rowCount / pageSize) + 1
					}
				}
			},
			// 评论触底
			onScrolltolowerPL() {
				const page1 = this.pl_page + 1
				const totalPage = this.pl_totalPage
				if (page1 <= totalPage) {
					this.pl_page = page1
					this._getCurrentDetailPLData()
				} else {
					uni.showToast({
						title: '已经到底部了',
						icon: 'none'
					})
				}
			},
			// 拿到评论
			_getCurrentDetailPLData() {
				const page = this.pl_page
				const size = this.pl_size
				uni.request({
					url: `${config.api_base_url}merchant/store/storeEvaluates/${this.id}/${page}/${size}`,
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.pl_total = data.total
							this.pl_totalPage = this.pageTotal(this.pl_total, this.pl_size)
							for (const item of data.rows) {
								if (item.createdAt) {
									item.createdAt2 = mygettime(item.createdAt)
								}
							}
							this.pl_list = this.pl_list.concat(data.rows)
						} else {
							this.pl_page = 1
							this.pl_size = 10
							this.pl_total = 0
							this.pl_totalPage = 0
							this.pl_list = []
							uni.showToast({
								icon: 'none',
								title: status.msg
							})
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '请求评论失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
			// 商家详情
			_getStoreData() {
				uni.request({
					url: `${config.api_base_url}merchant/store/${this.id}`,
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							if (data.latitude && data.longitude) {
								const result = myGetDistance(this.latitude, this.longitude, data.latitude, data.longitude);
								if (result) {
									data.jlresult = result;
								}
							}
							if (data.rate) {
								const vip2 = JSON.parse(data.rate).vip2;
								data.vip2 = Math.floor(vip2 * 100) / 10;
								const vip1 = JSON.parse(data.rate).vip1;
								data.vip1 = Math.floor(vip1 * 100) / 10;
							}
							let swiperData = JSON.parse(data.images)
							swiperData = Object.values(swiperData)

							data.swiperData = swiperData
							this.mystore = data
							// 解决小程序在商家详情上面不显示店铺名称的BUG
							if (this.mystore.storeName) {
								uni.setNavigationBarTitle({
									title: this.mystore.storeName
								})
							}
						} else {
							this.mystore = {}
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '请求评论失败, 网络异常'
						})
					}),
					complete: (() => {
						uni.stopPullDownRefresh()
					})
				})
			},
			// 商家标签
			_getStoreBQList() {
				uni.request({
					url: `${config.api_base_url}merchant/store/store/${this.id}/1/2`,
					success: ((res) => {
						let { status, data } = res.data
						if (status.flag === true) {
							this.tags = data.tags
						} else {
							this.tags = []
						}
					}),
					fail: (() => {
						uni.showToast({
							icon: 'none',
							title: '查询失败, 网络异常'
						})
					})
				})
			},
			_beginSetAddressByH5() {
				uni.request({
					url: `${config.api_base_url}orders/pay/config`,
					method: 'POST',
					data: {
						url: location.href
					},
					success: ((res) => {
						let {
							status,
							data
						} = res.data
						if (status.flag === true) {
							jweixin.config({
								debug: false,
								appId: data.appid, // 必填，公众号的唯一标识
								timestamp: data.timestamp, // 必填，生成签名的时间戳
								nonceStr: data.nonceStr, // 必填，生成签名的随机串
								signature: data.signature, // 必填，签名，见附录1
								jsApiList: [
									'checkJsApi',
									'scanQRCode',
									'getLocation'
								]
							});
							jweixin.ready(() => {
								jweixin.getLocation({
									type: 'wgs84',
									success: ((res) => {
										this.latitude = res.latitude;
										this.longitude = res.longitude;
									}),
									fail: (() => {
										this.latitude = undefined;
										this.longitude = undefined;
									}),
									complete: (() => {
										this._getStoreData() // 商铺详情
									})
								})
							});
							jweixin.error((err) => {
								console.log(JSON.stringify(err))
							})
						}
					})
				})
			},
		},
		onReady() {
			const that = this
			uni.getSystemInfo({
				success: ((res) => {
					let info_b = uni.createSelectorQuery().select(".my-need-height");
					info_b.boundingClientRect(function(data) {
						that.plHeight_h5 = res.windowHeight - data.height // 小程序和H5是可以这么设置，但是到了自定义头部的时候，是不允许这么设置的
						that.plHeight_app = res.windowHeight - res.statusBarHeight - 44 - data.height // app的height
						that.maxWindowHeight_h5 = res.windowHeight - uni.upx2px(82)
						that.maxWindowHeight_app = res.windowHeight - res.statusBarHeight - 44 - uni.upx2px(82)
					}).exec()
				})
			})
		},
		onLoad(e) {
			if (!e.id) {
				uni.showToast({
					icon: 'none',
					title: '暂无id, 无法查看详情'
				})
				return false
			}
			this.id = e.id
			// #ifdef APP-PLUS || MP
			// 获取你自己的经纬度
			uni.getLocation({
				type: 'wgs84',
				success: ((res) => {
					this.latitude = res.latitude;
					this.longitude = res.longitude;
				}),
				fail: ((err) => {
					this.latitude = undefined;
					this.longitude = undefined;
				}),
				complete: (() => {
					this._getStoreData() // 商铺详情
				})
			});
			// #endif
			// #ifdef H5
			// h5版本的地理位置
			this._beginSetAddressByH5()
			// #endif
			// this._getCartData(this.id) // 购物车
			this._getCurrentDetailPLData() // 当前商铺的评论列表
			this._getStoreBQList()
		},
		//下拉刷新
		onPullDownRefresh() {
			if (this.selectIndex === 2) {
				this.pl_page = 1
				this.pl_size = 10
				this.pl_total = 0
				this.pl_totalPage = 0
				this.pl_list = []
				this._getCurrentDetailPLData()
			} else if (this.selectIndex === 1) {
				this.mystore = {}
				this.latitude = ''
				this.longitude = ''
				// 获取你自己的经纬度
				uni.getLocation({
					type: 'wgs84',
					success: res => {
						this.latitude = res.latitude;
						this.longitude = res.longitude;
					},
					fail: err => {
						this.latitude = 38.04276;
						this.longitude = 114.5143;
					},
					complete: (() => {
						this._getStoreData()
					})
				});
			} else if (this.selectIndex === 0) {
				this.categoryList = []
				this.categoryCurrent = 0 // 默认是0
				// 分类对应的列表
				this.page = 1
				this.size = 10
				this.total = 0
				this.totalPage = 0
				this.currentList = []
				// 处理金额和数量
				this.totalPrice = 0
				this.totalNum = 0
				this._getCartData(this.id)
			}
		},
	}
</script>

<style>
	page {
		background-color: #F3F0F3;
	}
</style>
<style scoped>
	/* ios底部安全距离-padding */
	.savepadding {
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		box-sizing: content-box;
	}
	.shopdetail {
		width: 100%;
		height: 100%;
	}

	.shopdetail-banner {
		width: 100%;
		height: 210rpx;
	}

	.shopdetail-banner-img {
		width: 100%;
		height: 100%;
	}

	.shopdetail-select {
		width: 100%;
		height: 80rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-content: center;
		box-sizing: border-box;
		padding-left: 146rpx;
		padding-right: 162rpx;
		background-color: #F3F0F3;
	}

	.shopdetail-select-item {
		font-size: 28rpx;
		height: 100%;
		line-height: 80rpx;
		color: rgba(0, 0, 0, 0.85);
	}

	.shopdetail-select-item-active {
		color: #F02230;
		position: relative;
	}

	.shopdetail-select-item-active::after {
		display: block;
		content: ' ';
		position: absolute;
		left: 50%;
		margin-left: -29rpx;
		bottom: 10rpx;
		width: 58rpx;
		height: 4rpx;
		background-color: #F02230;
	}

	.shopdetail-introduce {
		width: 100%;
		box-sizing: border-box;
		padding-left: 16rpx;
		padding-right: 14rpx;
		margin-bottom: 16rpx;
	}

	.shopdetail-introduce-wrap {
		width: 100%;
		height: 100%;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-left: 24rpx;
		padding-top: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 24rpx;
	}

	.shopdetail-introduce-wrap-name {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shopdetail-introduce-wrap-name-txt {
		line-height: 56rpx;
		font-size: 40rpx;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.85);
	}

	.shopdetail-introduce-wrap-name-jl {
		font-size: 27rpx;
		font-weight: 400;
		line-height: 38rpx;
		color: #999999;
	}

	.shopdetail-introduce-wrap-zk {
		margin-top: 12rpx;
		display: flex;
		align-items: center;
	}

	.shopdetail-introduce-wrap-zk-img {
		width: 36rpx;
		height: 36rpx;
		margin-right: 18rpx;
	}

	.shopdetail-introduce-wrap-zk-txt {
		font-size: 24rpx;
		color: #333333;
		font-weight: 500;
		line-height: 34rpx;
		margin-right: 24rpx;
	}

	.shopdetail-introduce-wrap-zk-left {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.shopdetail-introduce-wrap-zk-left-mark {
		padding: 2rpx 4rpx 0 8rpx;
		font-size: 24rpx;
		color: #E8541E;
		line-height: 34rpx;
		background-color: rgba(233, 90, 39, 0.1);
		border-radius: 2rpx;
		margin-right: 10rpx;
	}

	.shopdetail-introduce-wrap-zk-left-txt {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(232, 84, 30, 1);
		line-height: 34rpx;
	}

	.shopdetail-introduce-wrap-zk-right {
		display: flex;
		align-items: center;
	}

	.shopdetail-introduce-wrap-zk-right-mark {
		padding: 2rpx 4rpx 0 8rpx;
		font-size: 24rpx;
		color: #1E92E8;
		line-height: 34rpx;
		background-color: rgba(30, 146, 232, 0.1);
		border-radius: 2rpx;
		margin-right: 10rpx;
	}

	.shopdetail-introduce-wrap-zk-right-txt {
		font-size: 24rpx;
		font-weight: 400;
		color: #1E92E8;
		line-height: 34rpx;
	}

	.shopdetail-introduce-wrap-pl {
		margin-top: 22rpx;
		display: flex;
		align-items: center;
	}

	.shopdetail-introduce-wrap-pl-item {
		display: flex;
		align-items: center;
		margin-right: 18rpx;
	}

	.shopdetail-introduce-wrap-pl-item-content {
		position: relative;
		display: inline-block;
		line-height: 34rpx;
		padding: 2rpx 14px;
		margin-left: 20rpx;
		background-color: #f7b500;
		font-size: 14rpx;
		font-weight: normal;
		color: #ffffff;
		border-radius: 4rpx;
		box-sizing: border-box;
	}

	.shopdetail-introduce-wrap-pl-item-content::before {
		content: '';
		display: block;
		position: absolute;
		top: -6rpx;
		left: -42rpx;
		border-width: 24rpx;
		border-style: solid;
		border-color: transparent #f7b500 transparent transparent;
		border-top-right-radius: 50%;
		border-bottom-right-radius: 50%;
	}

	.shopdetail-introduce-wrap-pl-item-content::after {
		content: '';
		display: block;
		position: absolute;
		top: calc(50% - 4rpx);
		left: 0;
		width: 8rpx;
		height: 8rpx;
		background-color: #ffffff;
		border-radius: 50%;
	}

	.shopdetail-introduce-wrap-line {
		width: 100%;
		margin-top: 38rpx;
		height: 3rpx;
		background-color: #EEEEEE;
	}

	.shopdetail-introduce-wrap-warn {
		width: 100%;
		display: flex;
		align-items: center;
		margin-top: 10rpx;
	}

	.shopdetail-introduce-wrap-warn-title {
		font-size: 24rpx;
		color: rgba(0, 0, 0, 0.85);
		font-weight: 400;
		margin-right: 10rpx;
	}

	.shopdetail-introduce-wrap-warn-content {
		display: flex;
		flex-direction: column;
	}

	.shopdetail-introduce-wrap-warn-content-top {
		font-size: 24rpx;
		line-height: 34rpx;
		color: rgba(0, 0, 0, 0.85);
		font-weight: 400;
	}

	.shopdetail-introduce-wrap-warn-content-bottom {
		font-size: 24rpx;
		line-height: 34rpx;
		color: rgba(0, 0, 0, 0.85);
		font-weight: 400;
	}

	.shopdetail-list {
		width: 100%;
		margin-top: 16rpx;
		padding-bottom: 82rpx;
		display: flex;
		justify-content: space-between;
		background-color: #F3F0F3;
	}

	.shopdetail-list-title {
		width: 160rpx;
		height: 100%;
		background-color: #F3F0F3;
		display: flex;
		flex-direction: column;
	}

	.shopdetail-list-title-item {
		width: 160rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(68, 68, 68, 0.85);
	}

	.shopdetail-list-title-item-active {
		background-color: #fff;
	}

	.shopdetail-list-content {
		flex: 1;
		height: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-left: 18rpx;
		padding-right: 26rpx;
		padding-top: 20rpx;
		background-color: #fff;
	}

	.shopdetail-list-content-title {
		font-size: 28rpx;
		color: rgba(68, 68, 68, 0.85);
		line-height: 40rpx;
		font-weight: 400;
		margin-bottom: 14rpx;
	}

	.shopdetail-list-content-list {
		width: 100%;
		display: flex;
		flex-direction: column;
		padding-bottom: 82rpx;
	}

	.shopdetail-list-content-list-item {
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 24rpx;
	}

	.shopdetail-list-content-list-item:last-child {
		margin-bottom: 0;
	}

	.shopdetail-list-content-list-item-img {
		width: 160rpx;
		height: 160rpx;
		border-radius: 12rpx;
		margin-right: 18rpx;
		background-color: #eee;
	}

	.shopdetail-list-content-list-item-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.shopdetail-list-content-list-item-info-name {
		font-size: 28rpx;
		color: rgba(0, 0, 0, 0.85);
		line-height: 40rpx;
		font-weight: 600;
	}

	.shopdetail-list-content-list-item-info-price-num {
		display: flex;
		align-items: auto;
		margin-top: 12rpx;
	}

	.shopdetail-list-content-list-item-info-price-num-left {
		display: flex;
		align-items: baseline;
	}

	.shopdetail-list-content-list-item-info-price-num-left-mark {
		color: #F02230;
		font-size: 24rpx;
		font-weight: 600;
	}

	.shopdetail-list-content-list-item-info-price-num-left-num {
		color: #F02230;
		font-size: 36rpx;
		font-weight: 600;
	}

	.shopdetail-list-content-list-item-info-price-num-right {
		display: flex;
		align-items: center;
		margin-right: 0;
		margin-left: auto;
	}

	.shopdetail-list-content-list-item-info-price-num-right-jian {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	.shopdetail-list-content-list-item-info-price-num-right-num {
		font-size: 28rpx;
		line-height: 40rpx;
		color: rgba(0, 0, 0, 0.85);
		margin-left: 22rpx;
		margin-right: 22rpx;
	}

	.shopdetail-list-content-list-item-info-price-num-right-jia {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
	}

	.shopdetail-list-content-list-item-info-price-yues {
		margin-top: 28rpx;
		font-size: 24rpx;
		font-weight: 400;
		line-height: 34rpx;
	}

	.shopdetail-handle {
		width: 100%;
		box-sizing: border-box;
		padding-left: 28rpx;
		padding-right: 26rpx;
		height: 82rpx;
		position: fixed;
		left: 0;
		bottom: 0;
	}

	.shopdetail-handle-wrap {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.shopdetail-handle-wrap-left {
		width: 150rpx;
		height: 100%;
		border-top-left-radius: 30rpx;
		border-bottom-left-radius: 30rpx;
		background-color: #F02230;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 10rpx;
	}

	.shopdetail-handle-wrap-left-img {
		width: 44rpx;
		height: 39rpx;
		margin-right: 20rpx;
	}

	.shopdetail-handle-wrap-left-txt {
		display: flex;
		flex-direction: column;
	}

	.shopdetail-handle-wrap-left-txt-top {
		font-size: 20rpx;
		color: #fff;
		font-weight: 500;
		line-height: 26rpx;
	}

	.shopdetail-handle-wrap-left-txt-bottom {
		font-size: 20rpx;
		color: #fff;
		font-weight: 500;
		line-height: 26rpx;
	}

	.shopdetail-handle-wrap-middle {
		width: 300rpx;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		color: #fff;
		font-weight: 500;
		background-color: #F02230;
	}

	.shopdetail-handle-wrap-right {
		width: 250rpx;
		height: 100%;
		border-top-right-radius: 30rpx;
		border-bottom-right-radius: 30rpx;
		background-color: #F02230;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
	}

	.shopdetail-handle-wrap-right-img {
		width: 39rpx;
		height: 38rpx;
		margin-right: 22rpx;
	}

	.shopdetail-handle-wrap-right-txt {
		font-size: 28rpx;
		font-weight: 500;
		line-height: 40rpx;
		color: #fff;
		margin-right: 18rpx;
	}

	.shopdetail-handle-wrap-right-arrow {
		width: 13rpx;
		height: 22rpx;
	}

	.shopdetail-weizhi {
		width: 100%;
		box-sizing: border-box;
		padding-left: 14rpx;
		padding-right: 16rpx;
	}

	.shopdetail-weizhi-wrap {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		padding-left: 24rpx;
		padding-right: 20rpx;
		padding-top: 20rpx;
		padding-bottom: 40rpx;
		background-color: #fff;
		border-radius: 20rpx;
	}

	.shopdetail-weizhi-wrap-name {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.shopdetail-weizhi-wrap-name-txt {
		font-size: 40rpx;
		font-weight: 600;
		color: rgba(0, 0, 0, 0.85);
		line-height: 56rpx;
	}

	.shopdetail-weizhi-wrap-name-jl {
		font-size: 27rpx;
		font-weight: 400;
		line-height: 38rpx;
		color: #999999;
	}

	.shopdetail-weizhi-wrap-line {
		width: 100%;
		height: 3rpx;
		background-color: #EEEEEE;
	}

	.shopdetail-weizhi-wrap-address {
		width: 100%;
		display: flex;
		align-items: flex-start;
		margin-top: 22rpx;
	}

	.shopdetail-weizhi-wrap-address-leftimg {
		width: 28rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}

	.shopdetail-weizhi-wrap-address-txt {
		flex: 1;
		font-size: 24rpx;
		color: #333333;
		line-height: 34rpx;
	}

	.shopdetail-weizhi-wrap-address-rightimg {
		width: 34rpx;
		height: 40rpx;
		margin-right: 22rpx;
		margin-left: 62rpx;
	}

	.shopdetail-weizhi-wrap-time {
		margin-top: 18rpx;
		width: 100%;
		display: flex;
		align-items: center;
	}

	.shopdetail-weizhi-wrap-time-img {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		margin-right: 18rpx;
	}

	.shopdetail-weizhi-wrap-time-txt {
		font-size: 24rpx;
		line-height: 34rpx;
		font-weight: 400;
		color: #333;
	}

	.shopdetail-dbanner {
		width: 100%;
		height: 288rpx;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding-left: 34rpx;
		padding-right: 48rpx;
	}

	.shopdetail-dbanner-img {
		width: 100%;
		height: 100%;
		border-radius: 24rpx;
	}

	.shopdetail-jj {
		width: 100%;
		box-sizing: border-box;
		padding-left: 14rpx;
		padding-right: 16rpx;
		margin-top: 20rpx;
	}

	.shopdetail-jj-wrap {
		width: 100%;
		height: 100%;
		border-radius: 20rpx;
		background-color: #fff;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		box-sizing: border-box;
		padding-top: 24rpx;
		padding-bottom: 24rpx;
		padding-left: 26rpx;
		padding-right: 50rpx;
	}

	.shopdetail-jj-wrap-img {
		flex-shrink: 0;
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.shopdetail-jj-wrap-txt {
		font-size: 24rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.85);
		line-height: 34rpx;
	}

	.shopdetail-smjz {
		position: fixed;
		left: 50%;
		bottom: 57px;
		margin-left: -213rpx;
		width: 426rpx;
		height: 76rpx;
		border-radius: 38rpx;
		line-height: 76rpx;
	}

	.shopdetail-smjz-btn {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #f02230;
		border-radius: 38rpx;
	}
	.shopdetail-smjz-btn-txt {
		font-weight: 500;
		font-size: 28rpx;
		color: #fff;
	}

	.shopdetail-pj {
		width: 100%;
		background-color: #fff;
		display: flex;
		flex-direction: column;
	}

	.shopdetail-pj-item {
		width: 100%;
		display: flex;
		box-sizing: border-box;
		padding-top: 28rpx;
		padding-bottom: 16rpx;
		padding-left: 30rpx;
	}

	.shopdetail-pj-item-avatar {
		width: 72rpx;
		height: 72rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}

	.shopdetail-pj-item-info {
		flex: 1;
	}

	.shopdetail-pj-item-info-wrap {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	.shopdetail-pj-item-info-wrap-name {
		display: flex;
		flex-direction: column;
	}

	.shopdetail-pj-item-info-wrap-name-top {
		font-size: 28rpx;
		color: #343434;
		line-height: 40rpx;
		font-weight: 400;
	}

	.shopdetail-pj-item-info-wrap-name-bottom {
		font-size: 24rpx;
		color: #AAAAAA;
		line-height: 36rpx;
		font-weight: 400;
	}

	.shopdetail-pj-item-info-wrap-zan {
		display: flex;
		align-items: center;
		margin-right: 32rpx;
		margin-left: auto;
		margin-top: 12rpx;
	}

	.shopdetail-pj-item-info-wrap-zan-num {
		font-size: 24rpx;
		color: #AAAAAA;
		line-height: 34rpx;
		margin-right: 10rpx;
	}

	.shopdetail-pj-item-info-wrap-zan-img {
		width: 45rpx;
		height: 39rpx;
	}

	.shopdetail-pj-item-info-content {
		margin-top: 24rpx;
		width: 100%;
		font-size: 28rpx;
		color: #343434;
		line-height: 40rpx;
		font-weight: 500;
	}

	.shopdetail-pj-item-info-line {
		margin-top: 16rpx;
		width: 100%;
		height: 3rpx;
		background-color: #F4F1F4;
	}
</style>
